<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>Echarts绘制横向柱状图(圆角+渐变)</title>
<script src="https://cdn.bootcss.com/echarts/3.5.4/echarts.min.js"></script>
</head>
<body>
<div id="main" style="height: 18vh;width: 19vw;"></div>
<script type="text/javascript">
        var dataNum = ["100","200","300","400","500","600"];     
        var myChart = echarts.init(document.getElementById('main'));  
        option ={

        tooltip : {
            trigger: 'item',
                // formatter: function(data){
                // var txt =data.name+":   "+dataNum[data.dataIndex]+"人   ("+data.value+"%)";
                //     return txt;
                // }
        },
        grid:{ 
            borderWidth:0,
            x:'10%',
            y:'15%',
            x2:'15%',
            y2:'15%',      
        },
        xAxis: [{  
            type: 'value',
            max:100,
            show:false,
            boundaryGap:true,
            axisLabel:{
                margin:0
            },    
        }
        ],
        yAxis: [
        {
            type: 'category',
            position:'right',
            boundaryGap:false,
            axisTick:{
                show:false
            },
            // y 轴线
            axisLine:{
                show:false,          
            },  
            // 分割线设置
            splitLine:{
                show:false,  //显示分割线         
            },
            axisLabel:{

            },
            show:false,
            //    data: ['8:00-9:00','11:00-12:00','15:00-16:00','12:00-13:00','14:00-15:00','13:00-14:00',]
        }
        ],
        series : [
            {
                name:'',
                type:'bar',
                barCateGoryGap:1,
                    barMinHeight:30,  //最小柱高
                    barWidth: 16,  //柱宽度
                    barMaxWidth:100,   //最大柱宽度
                itemStyle : {
                    
                    normal: {
                        barBorderRadius: 30,
                        color: function(params) {
                            var colorList = [
                                '#ee4065','#2196f4','#6ccc00','#f9cb00','#c065ff',
                                '#41daea'
                            ];
                            return colorList[params.dataIndex]
                        },
                        label : {
                            show: true,
                            position: 'inside',
                            textStyle:{
                                    color:'white',
                                    fontSize:'11'
                                }
                        }
                    },
                    //    emphasis:{
                    //     barBorderRadius: 30,
                    //        label : {
                    //            show: true,
                    //            textStyle:{
                    //                 position: 'inside',
                    //                 fontSize:17
                    //            }

                    //        }
                    //    }
                },
                data:[10,20,30,40,50,60]           
            }
        ]
        };
        myChart.setOption(option);  
</script>
</body>
</html>